{% extends "base.html" %}

{% block content %}

{% if user.is_authenticated %}

<div class="page-header">
    <h2>Vytvoriť Achievement</h2>
</div>

{% if state == 1 and achievement %}

<div class="alert alert-success">
    <strong>Úspech!</strong> Achievement vytvorený.
</div>
<center>
<div class="input-prepend">
    <span class="add-on">URL</span>
    <input class="input-xxlarge" type="text" value="{{uri}}{% url show_one_achievement achievement_id=achievement.uuid %}" />
</div>
<br><br>
<a href="{% url show_one_achievement achievement_id=achievement.uuid %}"><button class="btn btn-primary btn-large btn-info">Prejsť na vytvorený achievement</button></a>
</center>

{% else %}

<form action="." method="post" enctype="multipart/form-data">{% csrf_token %}

    <table class='table table-bordered'>
        <tbody>
            <fieldset>
                <tr class="black">
                    <th colspan="2"><h3 style="color:white;">Hlavné údaje</h3></th>
                </tr>
                
                <tr class="{% if errors.name %}error_row{% endif %}">
                    <td><label for="achievement_name" class="control-label"><b>Meno:</b></label></td>
                    <td>
                        <div class="control-group">
                            <div class="controls">
                                <input class="span6" autocomplete="off" name="a_name" placeholder="Tu napíšte meno..." type="text" value="{{ data.a_name.0|default_if_none:"" }}"/>
                                {% if errors.name %}<span class="help-inline"><ul><li>{{ errors.name }}</li></ul></span>{% endif %}
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="{% if errors.description %}error_row{% endif %}">
                    <td><label for="achievement_desc" class="control-label"><b>Popis:</b></label></td>
                    <td>
                        <div class="control-group">
                            <div class="controls controls-row">
                                <textarea class="span6" rows="4" cols="80" name="a_desc" placeholder="Tu napíšte popis podúlohy...">{{ data.a_desc.0|default_if_none:"" }}</textarea>
                                {% if errors.description %}<span class="help-inline"><ul><li>{{ errors.description }}</li></ul></span>{% endif %}
                            </div>
                        </div>
                    </td>
                </tr>
                
                <tr class="{% if errors.reward %}error_row{% endif %}">
                    <td><label for="achievement_reward" class="control-label"><b>Odmena:</b></label></td>
                    <td>
                        <div class="control-group">
                            <div class="controls controls-row">
                                <div class="input-append">
                                    <input class="input-mini {% if max_points == 0 %}uneditable-input{% endif %}" autocomplete="off" name="a_reward" type="text" {% if data.a_reward.0 %}value="{{ data.a_reward.0 }}"{% else %}value="0"{% endif %}/>
                                    <span class="add-on">bodov z možných <b style="color:white;">{{ max_points }}</b></span>
                                </div>
                                {% if errors.reward %}<span class="help-inline"><ul><li>{{ errors.reward }}</li></ul></span>{% endif %}
                                <span class="help-block">Odmena môže byť maximálne desatina vaších celkovo nazbieraných bodov<br>Prvé body môžte získať napríklad plnením spoločných achievementov</span>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td><label for="achievement_category" class="control-label"><b>Kategória:</b></label></td>
                    <td>
                        <div class="control-group">
                            <div class="controls controls-row">
                                <select name="a_category" value="{% if data.a_category.0 %}{{ data.a_category.0 }}{% endif %}">
                                    <option>---</option>
                                    {% for cat in categories %}
                                    <option {% if data.a_category.0 == cat %}if selected="true"{% endif %}>{{ cat }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </td>
                </tr>
                
                <tr class="black">
                    <th colspan="2"><h3 style="color:white;">Vedľajšie údaje</h3></th>
                </tr>
                
                <tr class="{% if errors.deadline %}error_row{% endif %}">
                    <td><label for="achievement_deadline" class="control-label"><b>Deadline:</b></label></td>
                    <td>
                    
                    <div class="control-group">
                            <div class="controls controls-row">
                                <div class="input-append">
                                    <input class="input-small" autocomplete="off" name="a_deadline" placeholder="(bez deadline)" type="text" value="{{ data.a_deadline.0|default_if_none:"" }}"/>
                                    <span class="add-on">deň.mesiac.rok</span>
                                </div>
                                {% if errors.deadline %}<span class="help-inline"><ul><li>{{ errors.deadline }}</li></ul></span>{% endif %}
                                <span class="help-block">Deadline je dátum, do ktorého je možné tento achievement splniť</span>                            
                            </div>
                    </div>
                        
                    </td>
                </tr>
                <tr class="{% if errors.progress %}error_row{% endif %}">
                    <td><label for="achievement_progress" class="control-label"><b>Priebeh:</b></label></td>
                    <td>
                    <div class="control-group">
                        <div class="controls controls-row">
                            <input class="span3" type="text" name="a_progress" placeholder="(bez priebehu)" {% if data.a_progress.0 %}value="{{ data.a_progress.0 }}"{% endif %}>
                            {% if errors.progress %}<span class="help-inline"><ul><li>{{ errors.progress }}</li></ul></span>{% endif %}
                        </div>
                        <span class="help-block">Priebeh definuje istý počet krokov, ktoré používateľ môže využiť k sledovaniu svojho postupu pri plnení úlohy</span>
                        </div>
                    </div>
                    </td>
                </tr>
                
                <tr class="{% if errors.picture %}error_row{% endif %}">
                    <td><label for="achievement_reward" class="control-label"><b>Obrázok:</b></label></td>
                    <td>
                    <div class="control-group">
                        <div class="controls controls-row">
                            <input  id="file_select" name="a_picture" type="file" accept="image/*" style="display:none;" />
                            <div class="input-append">
                                <input id="file_path" class="input-large" type="text" placeholder="(bez obrázka)" value="{{ data.a_picture.0|default_if_none:"" }}">
                                <a class="btn" id="file_button">Prehľadávať</a>
                            </div>
                            {% if errors.picture %}<span class="help-inline"><ul><li>{{ errors.picture }}</li></ul></span>{% endif %}
                        </div>
                    </div>
                    </td>
                </tr>
                
                <tr>
                    <th colspan="2"><h3 style="color:white;">Ochrana</h3></th>
                </tr>
                
                <tr class="{% if errors.password or errors.password_again %}error_row{% endif %}">
                    <td><label for="achievement_password" class="control-label"><b>Heslo:</b></label></td>
                    <td>
                    <div class="control-group">
                        <div class="controls controls-row">
                            <input class="span3" autocomplete="off" name="a_password" placeholder="(bez hesla)" type="password"/>
                            {% if errors.password %}<span class="help-inline"><ul><li>{{ errors.password }}</li></ul></span>{% else %}
                                {% if errors.password_again %}
                                    <span class="help-inline"><ul><li>Prosím, zadajte heslo znova</li></ul></span>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                    
                    
                    <!--<span class="help-block">(nechajte prázdne pre achievement bez hesla)</span>-->
                    </td>
                    
                </tr>

                <tr>
                    <td><label for="achievement_hide" class="control-label"><b>Skrytý: </b></label></td>
                    <td>
                    <label class="checkbox">
                        <input name="a_hidden" type="checkbox" {% if data.a_hidden %}checked="true"{% endif %}/>
                        <span class="help-inline">(nebude sa zobrazovať vo verejnom zozname)</span>
                    </label>
                    </td>
                </tr>
                
                <tr>
                    <td><label for="achievement_evidence" class="control-label"><b>Vyžaduje kontrolu: </b></label></td>
                    <td>
                    <label class="checkbox">
                        <input name="a_evidence" type="checkbox" {% if data.a_evidence %}checked="true"{% endif %}/>
                        <span class="help-inline">(splnenie bude vyžadovať zaslanie dôkazu autorovi)</span>
                    </label>
                    </td>
                </tr>
                
                <tr>
                    <th colspan="2"><h3 style="color:white;">Závislosti</h3></th>
                </tr>
                
                <tr id="placeholder_dep">
                    <td colspan="2">
                        <button id="add_dep" class="btn" type="button">Pridať</button>
                    </td>
                </tr>
                
                <tr>
                    <th colspan="2"><h3 style="color:white;">Podúlohy</h3></th>
                </tr>
                
                <tr id="placeholder_sub">
                    <td colspan="2">
                        <button id="add_sub" class="btn" type="button">Pridať</button>
                    </td>
                </tr>
            </fieldset>
        </tbody>
    </table>
    
    <br>
    
    <table class='table table-bordered'>
        <tbody>
            <fieldset>
                <tr>
                    <th><h3 style="color:white;">Potvrdenie</h3></th>
                </tr>
                
                <tr class="{% if data and not errors.recaptcha_valid %}error_row{% endif %}">
                    <td>
                        {{ form.captcha }}
                        {% if data and not errors.recaptcha_valid %}
                            <span class="help-inline"><ul><li>Nezhoduje sa</li></ul></span>
                        {% endif %}
                    </td>
                </tr>
                
                
                
                {% if next %}
                    <input type="hidden" name="next" value="{{ next }}" />
                {% else %}
                    <input type="hidden" name="next" value="/" />
                {% endif %} 
                
                
                <tr>
                <th colspan="2">
                <div>
                    <input type="submit" value="Vytvoriť" class="btn btn-block btn-primary btn-large btn-info"/>
                </div>
                </th>
                </tr>
                
            </fieldset>
        </tbody>
    </table>
    
    
                
</form>

{% endif %}



<script type="text/javascript">
    $(document).ready(function() {
        $("#add_sub").click(function() {
            add_subachievement('#placeholder_sub');
        });
        
        $("#add_dep").click(function() {
            add_dependency('#placeholder_dep');
        });
        
        $(".sub_instance .close, .dep_instance .close").live('click', function() {
            $(this).parent().parent().remove();
        });
        
        $("#file_select").change(function() {
            $("#file_path").val($(this).val());
        });
        
        $("#file_button").click(function() {
            $("#file_select").click();
        });
        
        /* You mad. */
        {% if data.subs %}
        {% for sub in data.subs %}
        var element = add_subachievement('#placeholder_sub');
        element.find(".sub_input").attr("value", "{{ sub.0 }}");
        {% if sub.3.0 %}
        element.find(".sub_input_error").attr("style", "display:block;").html("<ul><li>{{ sub.3.0 }}</li></ul>");
        element.addClass("error_row");
        {% endif %}
        
        element.find(".sub_textarea").attr("value", "{{ sub.1 }}");
        {% if sub.3.1 %}
        element.find(".sub_textarea_error").attr("style", "display:block;").html("<ul><li>{{ sub.3.1 }}</li></ul>");
        element.addClass("error_row");
        {% endif %}
        
        element.find(".sub_reward").attr("value", "{{ sub.2 }}");
        {% if sub.3.2 %}
        element.find(".sub_reward_error").attr("style", "display:block;").html("<ul><li>{{ sub.3.2 }}</li></ul>");
        element.addClass("error_row");
        {% endif %}
        
        {% endfor %}
        {% endif %}
        
        {% if data.dep_name %}
        {% for dep in data.dep_name %}
        var element = add_dependency('#placeholder_dep');
        element.find(".dep_select").attr("value", "{{ dep }}");
        {% endfor %}
        {% endif %}
        
    });
    
    function add_subachievement(divbox) {
        var select = $(".sub_template").clone(true).removeClass("sub_template").addClass("sub_instance");
        $(divbox).before(select);
        return select;
    }
    
    function add_dependency(divbox) {
        var select = $(".dep_template").clone(true).removeClass("dep_template").addClass("dep_instance");
        $(divbox).before(select);
        return select;
    }
    
</script>

<div style="display:none;">
    <table>
        <tr class="sub_template">
            <td>
                <div class="input-prepend">
                    <span class="add-on">Meno</span>
                    <input class="sub_input input-large" autocomplete="off" name="sub_name" placeholder="Tu napíšte meno podúlohy..." type="text"/>
                </div>
                <span class="sub_input_error help-inline" style="display:none;"><ul><li>Chýba hodnota</li></ul></span>
            </td>
            <td>
                <a class="close"><i class="icon-white icon-remove"></i></a>
                <textarea placeholder="Tu napíšte popis podúlohy..." class="sub_textarea span6" rows="4" cols="80" name="sub_desc"></textarea>
                <span class="sub_textarea_error help-inline" style="display:none;"><ul><li>Chýba hodnota</li></ul></span>
                <div class="input-prepend input-append">
                    <span class="add-on">Odmena</span>
                    <input class="sub_reward input input-mini" autocomplete="off" name="sub_reward" type="text" value="0"/>
                    <span class="add-on">bodov z možných <b style="color:white;">{{ max_sub_points }}</b></span>
                </div>
                <span class="sub_reward_error help-inline" style="display:none;"><ul><li>Chýba hodnota</li></ul></span>
            </td>
        </tr>
        
        <tr class="dep_template">
            <td colspan="2">
                <select name="dep_name" class="dep_select span6">
                    {% for i in raw_autofill_data %}
                        <option>{{i}}</option>
                    {% endfor %}
                </select>
                <a class="close"><i class="icon-white icon-remove"></i></a>
            </td>
        </tr>
    </table>
</div>

{% else %}

    <div class="alert">
        <strong>Chyba!</strong> Nie ste prihlásení.
    </div>
    <center>
        <a href="{% url accounts_login %}">
            <button class="btn btn-primary btn-large btn-info">Prihlásiť sa</button>
        </a>
    </center>
    
{% endif %}
    
{% endblock %}

